<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../yl/index.css" />
    <link rel="stylesheet" href="../../yl/style.css" />
    <link rel="stylesheet" href="../../style/free.css" />
    <title>入住填报</title>
    <style>
        body {
            background-color: #F5F6F9;
        }

        .form-title {
            font-size: 34rem;
            line-height: 104rem;
            padding-left: 30rem;
            font-weight: bold;
            color: #333333;
        }

        .cu-form-group {
            background-color: #fff;
            padding: 1rem 30rem;
            display: flex;
            align-items: center;
            min-height: 126rem;
            justify-content: space-between;
        }

        .cu-form-group .title {
            text-align: justify;
            padding-right: 30rem;
            font-size: 30rem;
            position: relative;
            height: 60rem;
            line-height: 60rem;
            min-width: 160rem;
            margin-left: 30rem;
            font-weight: bold;
        }

        .required {
            position: absolute;
            color: red;
            top: 50%;
            left: -20rem;
            transform: translateY(-50%);
        }

        .cu-form-group input {
            flex: 1;
            font-size: 30rem;
            color: #333333;
            padding-right: 20rem;
        }

        .cu-form-group+.cu-form-group {
            border-top: 1rem solid #eee;
        }

        .button {
            background-color: rgb(71, 154, 76); font-weight: 700; color: #fff;margin: 50rem 30rem 0;  padding:20rem 0;  border-radius: 100rem;  display:flex;
            align-items: center;
            justify-content: center;  font-size: 28rem;
        }
    </style>
</head>

<body>
    <div id="app" class="flex flex-column pb-3" v-clock>
        <template v-if="true">
            <div class="form-title">
                房间信息
            </div>
            <div class="cu-form-group">
                <div class="title">
                    房型
                </div>
                <span style="width: 100%;font-size: 30rem;">{{dataForm.Room_Type_Name || ''}}</span>
            </div>
            <div class="cu-form-group">
                <div class="title">
                    房间号
                </div>
                <span style="width: 100%;font-size: 30rem;">{{dataForm.House_Room_SerialNumber || ''}}</span>
            </div>
            <div class="form-title">
                基础信息
            </div>
            <div class="cu-form-group">
                <div class="title">
                    <span class="required">*</span>姓名
                </div>
                <el-input v-model="dataForm.Guest_Name" class="borderless-input" placeholder="请输入姓名" />
            </div>
            <div class="cu-form-group">
                <div class="title">
                    <span class="required">*</span>身份证号
                </div>
                <el-input v-model="dataForm.ID_Card_Number" class="borderless-input" placeholder="请输入身份证号" />
            </div>
            <div class="cu-form-group">
                <div class="title">
                    <span class="required">*</span>联系电话
                </div>
                <el-input v-model="dataForm.Contact_Phone" class="borderless-input" placeholder="请输入联系电话" />
            </div>
            <div class="cu-form-group">
                <div class="title">
                    <span class="required">*</span>入住时间
                </div>
                <el-date-picker v-model="dataForm.Check_In_Date" style="width: 100%;" type="date" placeholder="请选择入住时间"
                    class="borderless-input" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" />
            </div>
            <div class="cu-form-group">
                <div class="title">
                    <span class="required">*</span>离店时间
                </div>
                <el-date-picker v-model="dataForm.Check_Out_Date" style="width: 100%;" type="date" placeholder="请选择离店时间"
                    class="borderless-input" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" />
            </div>
            
            <div class="button" @click="handleClick">
                提交
            </div>
        </template>
    </div>
    <script src="../../utils/utils.js"></script>
    <script src="../../utils/mixins.js"></script>
    <script src="../../config/config.js"></script>
    <script src="../../yl/vue.js"></script>
    <script src="../../yl/index.js"></script>
    <script src="../../yl/zh-cn.mjs"></script>
    <script src="../../yl/index.iife.min.js"></script>
    <script src="../../yl/jquery.min.js"></script>
    <script src="../../utils/jquery.cookie.js"></script>
    <script src="../../api/request.js"></script>
    <script src="../../utils/jweixin.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>